.vdo-player {
    width: 640px;
    height: 360px;
    background-color: #2e2e2e;
    font-size: 0;
    line-height: 0;
}

.m-ctvideo {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    font-size: 12px;
    line-height: 1.42857;
    color: #fff;
    overflow: hidden;
    .player {
        position: relative;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        .media {
            display: block;
            width: 100%;
            height: 100%;
            background: #000;
        }
        .icn {
            display: block;
            cursor: pointer;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 74px;
            height: 74px;
            margin-left: -37px;
            margin-top: -37px;
            background-position: center center;
            background-repeat: no-repeat;
            background-image: url();
            &:hover {
                background-image: url();
            }
        }
        .loading {
            // display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 25px;
            height: 25px;
            margin-top: -12px;
            margin-left: -12px;
            background: url() no-repeat;
            animation: 2s linear infinite forwards video-loading-spin;
        }
    }
    .ffull {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0);
    }
    .poster {
        // display: none;
        background: rgba(0, 0, 0, 0.1);
        .pic {
            display: block;
            width: 100%;
            height: 100%;
        }
    }
    .controls {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 42px;
        -ms-transform: translateY(100%);
        transform: translateY(100%);
        transition: transform 0.2s ease-in;
        &::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 79px;
            background: url() repeat-x;
        }
        .wrap {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            .right {
                float: right;
            }
            .duration, .time {
                height: 34px;
                margin: 0;
                line-height: 34px;
                color: rgba(255, 255, 255, 0.5);
                position: static;
            }
            .arrow {
                display: block;
                position: absolute;
                top: auto;
                bottom: -7px;
                left: 0;
                right: auto;
                width: 100%;
                height: 7px;
                background: url() no-repeat;
                background-position: center top;
                cursor: default;
            }
            .volume {
                position: relative;
                margin-left: 10px;
                margin-right: 1px;
                padding: 11px 10px;
                .mute {
                    display: block;
                    width: 16px;
                    height: 12px;
                    cursor: pointer;
                    background: url() no-repeat center center;
                }
                &:hover {
                    .volume-slider {
                        display: block;
                    }
                }
            }
            .brs {
                position: relative;
                width: 50px;
                height: 17px;
                margin-top: 9px;
                z-index: 3;
                .current {
                    line-height: 17px;
                    text-align: center;
                    color: rgba(255, 255, 255, 0.5);
                    cursor: default;
                }
                &:hover  {
                    .current {
                        color: #fff;
                    }
                    .options {
                        display: block;
                    }
                    .bridge {
                        position: absolute;
                        top: -150%;
                        left: 0;
                        width: 100%;
                        height: 300%;
                    }
                }
                &::after, &::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    display: block;
                    width: 1px;
                    height: 100%;
                    background: rgba(255, 255, 255, 0.2);
                }
                &::before {
                    left: 0;
                }
                &::after {
                    left: 0;
                }
                .options {
                    display: none;
                    position: absolute;
                    top: -13px;
                    left: -8px;
                    width: 66px;
                    box-sizing: border-box;
                    border: 1px solid rgba(255, 255, 255, 0.2);
                    border-bottom: none;
                    background: rgba(0, 0, 0, 0.7);
                    -ms-transform: translateY(-100%);
                    transform: translateY(-100%);
                    .itm {
                        position: relative;
                        height: 26px;
                        padding: 0;
                        line-height: 26px;
                        border: none;
                        border-top: 1px solid rgba(255, 255, 255, 0.2);
                        &:first-child {
                            border-top-color: transparent;
                        }
                        &:hover, &.z-sel {
                            border-top-color: transparent;
                            background: rgba(255, 255, 255, 0.2);
                        }
                        &.z-sel {
                            .label:before {
                                content: '';
                                position: absolute;
                                top: 9px;
                                left: 4px;
                                display: block;
                                width: 10px;
                                height: 8px;
                                background: url() no-repeat center;
                            }
                        }
                    }
                    .label {
                        position: relative;
                        display: block;
                        width: 100%;
                        height: 100%;
                        padding: 0 10px 0 18px;
                        box-sizing: border-box;
                        text-align: justify;
                        overflow: hidden;
                        cursor: pointer;
                        &::after {
                            content: '';
                            display: inline-block;
                            width: 100%;
                            height: 0;
                        }
                    }
                }
            }
            .full {
                cursor: pointer;
                display: block;
                width: 34px;
                height: 34px;
                background: url() no-repeat center;
                &:hover {
                    background-image: url();
                }
            }
            .left {
                float: left;
                position: relative;
                top: 20px;
            }
            .play {
                width: 34px;
                height: 32px;
                margin: 0 6px;
                cursor: pointer;
                background: url() no-repeat center;
            }
        }
        .progresswrap {
            position: relative;
            height: 34px;
            padding: 15px 10px 0;
            overflow: hidden;
            box-sizing: content-box;
        }
        .progress {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            border-radius: 2px;
            background-color: rgba(255, 255, 255, 0.2);
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            .out {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                border-radius: 2px;
            }
            .out-1 {
                background-color: #b2072a;
                z-index: 2;
            }
            .in {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 100%;
            }
            .dot {
                position: absolute;
                top: -10px;
                right: -12px;
                display: block;
                width: 24px;
                height: 24px;
                background: url() no-repeat center;
            }
            .out-2 {
                background-color: rgba(255, 255, 255, 0.3);
                z-index: 1;
            }
        }
        .progress-2 {
            top: 35px;
            left: 10px;
            right: 10px;
            width: auto;
            &:hover {
                .j-ht {
                    display: block;
                } 
            }
            .j-ht {
                display: none;
                position: absolute;
                top: -27px;
                min-width: 44px;
                .hovertime {
                    border: 1px solid rgba(255, 255, 255, 0.2);
                    padding: 5px;
                    background: rgba(0, 0, 0, 0.7);
                }
                .arrow {
                    bottom: -10px;
                }
            }
        }
    }
    &.z-active .controls {
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
    .ffl {
        float: left;
    }
    .ffr {
        float: right;
    }
    .foh {
        overflow: hidden;
        position: relative;
        top: -20px;
    }
    &.z-pause {
        .play {
            opacity: 1;
        }
    }
    &.z-play {
        .play {
            opacity: 0;
        }
        .wrap {
            .play {
                opacity: 1;
                background-image: url();
            }
        }
    }
}

@keyframes video-loading-spin {
    0% {
        transform: rotateZ(0);
    }
    100% {
        transform: rotateZ(-360deg);
    }
}

.volume-slider {
    height: 87px;
    position: absolute;
    bottom: 26px;
    left: 0%;
    display: none;
    .ant-slider-track {
        background-color: #b2072a;
    }
    &:hover {
        .ant-slider-track {
            background-color: #b2072a;
        }
    }
    .ant-slider{
        border-color: #b2072a;
        &:hover {
            .ant-slider-handle:not(.ant-tooltip-open) {
                border-color: #b2072a;
            }
        }
    }
    .ant-slider-handle {
        border-color: #b2072a;
    }
}

.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
    color: #b2072a;
}

.ant-tabs-tab:hover {
    color: #b2072a;
}